<template>
  <div class="register">
    <div class="header">
      <van-icon name="arrow-left" @click="onBack" />
    </div>
    <div class="main">
      <h2 class="hint">快注册来体验吧！</h2>
      <van-form @submit="onSubmit" ref="formRef">
        <van-cell-group inset>
          <van-field
            v-model="mail"
            name="邮箱"
            label="邮箱"
            placeholder="邮箱"
            :rules="formRule.mail"
          />
          <van-field
            v-model="code"
            type="number"
            name="验证码"
            label="验证码"
            placeholder="验证码"
          >
            <template #button>
              <van-count-down
                v-if="isShowCountDown"
                :time="60000"
                format="ss"
                @finish="onCountDownFinish"
              />
              <van-button v-else size="small" type="primary" @click="onSendMail"
                >发送验证码</van-button
              >
            </template>
          </van-field>
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="formRule.password"
          />
          <van-field
            v-model="rePassword"
            type="password"
            name="确认密码"
            label="确认密码"
            placeholder="确认密码"
            :rules="formRule.password"
          />
        </van-cell-group>
        <div class="btn">
          <van-button round block type="primary" native-type="submit">
            注册
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { FormInstance, Notify } from 'vant'
import { checkMailCode, sendMail } from '../../../service/mail'
import { createUser } from '../../../service/user'
import { formRule } from '../../../utils/form-rule'

const formRef = ref<FormInstance>()
const router = useRouter()
const mail = ref()
const password = ref()
const rePassword = ref()
const code = ref()
const isShowCountDown = ref(false)

const onSubmit = () => {
  formRef.value?.validate().then(async () => {
    if (password.value !== rePassword.value) {
      Notify({
        message: '两次输入的密码不一致',
        type: 'warning'
      })
    }
    if (!code.value) return
    const success = await checkMailCode(mail.value, code.value)
    if (success) {
      const res = await createUser({
        mail: mail.value,
        name: 'nb' + Math.random().toString().slice(-6),
        password: password.value
      })
      if (res.message === 'OK') {
        Notify({
          message: '注册成功!请登录',
          type: 'success'
        })
        router.replace('/login')
      }
    }
  })
}
const onBack = () => {
  router.replace('/login')
}
const onSendMail = async () => {
  formRef.value?.validate('邮箱').then(async () => {
    isShowCountDown.value = true
    await sendMail(mail.value)
  })
}
const onCountDownFinish = () => {
  isShowCountDown.value = false
}
</script>

<style lang="scss" scoped>
.register {
  height: 100%;
  .header {
    display: flex;
    font-size: 22px;
    margin: 20px;
  }
  .main {
    .hint {
      margin-top: 78px;
      margin-left: 30px;
      margin-bottom: 30px;
    }
    .btn {
      margin: 20px;
    }
  }
}
</style>
